<template>
  <div class="myCloud">
    <!-- <search-input v-model="searchValue"></search-input> -->
    <!-- <search-input v-model="searchValue"></search-input> -->
    <search-input
      :search="searchValue"
      @transferSearch="getSearch"
    ></search-input>
    <!-- 产品列表 -->
    <div class="cloudForm">
      <cloud-item
        v-for="(item, index) in cloudDepotList"
        :key="index"
        :productItem="item"
        @changeCount="changeCount"
      ></cloud-item>
    </div>
    <!-- 底部 -->
    <div class="bottom" v-if="showBottom">
      <cloud-bottom>
        <template v-slot:left>
          <span>已选择{{ count }}件货物</span>
        </template>
        <template v-slot:right>
          <!-- <span @click="$router.push('/deliveryConfirmat')">立即提货</span> -->
          <span @click="gotoConfirm">立即提货</span>
        </template>
      </cloud-bottom>
    </div>
  </div>
</template>

<script>
import SearchInput from '@/components/SearchInput'
import cloudItem from './components/cloudItem'
import cloudBottom from './components/cloudBottom'
import { getCloudDepotList } from '@/api/cloud'
export default {
  name: 'myCloud',
  //   我的云仓 ----(产品列表)选中状态----选中-----立即提货
  components: { SearchInput, cloudItem, cloudBottom },

  data() {
    return {
      searchValue: '',
      showBottom: true,
      count: 2,
      page: 1, //页码
      pageSize: 10, //数量
      cloudDepotList: [] //云仓列表---要展开
    }
  },
  created() {
    this.getCloudDepotList()
    // this.productItem = this.cloudDepotList
    // console.log(this.cloudDepotList)
  },
  methods: {
    getSearch(val) {
      this.searchValue = val
    },
    gotoConfirm() {
      // 判断当前有没有选择商品
      let newProduct = this.cloudDepotList.filter(function(obj) {
        return obj.isSelect === true
      })
      if (this.count === 0) {
        return this.$toast('你还没有选择商品')
      }
      //   console.log(newProduct)
      //   this.kuCun = newProduct.goods_num
      const newArr = newProduct.map(v => {
        return {
          kuCun: v.goods_num,
          goodsId: v.goods_id,
          goodsName: v.goods_name,
          goodsPrice: v.goods_price,
          goodsNum: 1,
          goodsStandardId: v.goods_standard_id,
          goodsStandard: v.goods_standard
        }
      })
      //   选中的商品保存一份到确认页面  下个页面去本地取出来
      localStorage.setItem('newProduct', JSON.stringify(newArr))
      this.$router.push('/deliveryConfirmat')
    },
    // 修改选择的数量
    changeCount(e) {
      this.count = this.count + e
    },
    // 发请求获取云仓数据
    async getCloudDepotList() {
      try {
        const res = await getCloudDepotList({
          goodsName: '' || this.searchValue,

          page: this.page,
          pageSize: this.pageSize
        })

        if (res.code !== 200) {
          return this.$toast(res.msg)
        }

        this.cloudDepotList = res.data.list //直接获取后台的数据
        this.count = res.data.count //直接获取后台的数据
        if (res.data.count === 0) {
          this.$toast('您的云仓还没有商品')
          //   this.count = res.data.count
        }
      } catch (error) {
        console.dir(error)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.myCloud {
  background: #f7f6fb;
  padding-top: 52px;
  //   padding-bottom: 50px;
  .cloudForm {
    margin-bottom: 50px;
    padding: 12px;
  }
}
</style>
